<template>
	<view>
		<view>
			<view class="searchTop flex">
				<image src="static/goLeft.png" class="goLeft"></image>
				<input placeholder="搜索内容" />
				<image src="static/icon_clear.png" class="icon_clear"></image> 
			</view>  
			<view class="search_type flex">
				<view class="search_typeTab" v-for="(item,index) in typeArr" @tap="changeTab(index)"><text :class="curIndex == index?'cur':''" >{{ item.text }}</text> </view> 
			</view> 
		</view>

		<view> 
			<productType v-if="curIndex ==0"></productType> 
			<scroll-view v-if="curIndex ==1" class="storeListBox" scroll-y> 
				<view class="storeListBlock" v-for="(item,index) in stroeList">
					<view class="flex storeListBlockTop">
						<view class="fl_text flex">
							<image class="stroeLogo"></image>
							<view>
								<view class="stroeName">惠普中国官方旗舰店</view>
								<view  class="stroeScore">店铺星级
									<image src="static/icon_xing.png" style="width: 18rpx; height: 16rpx;"></image>
								</view>
							</view> 
						</view> 
						<text class="fr_store">进店</text>
					</view>
					<view class="storeListBlockBottom flex">
						<view class="storeListBlockPro"  v-for="(item,index) in storeListPro">
							<image src="static/bg.png" :lazy-load='true'></image>
							<text class="price">￥4999 </text>
						</view>
					</view>
				</view>
			</scroll-view> 
		</view>
	</view>
</template>

<script>
	import productType from './productType.vue'
	var that
	export default{
		data(){
			return{
				historyArr:[
					{},{},{},{},{},{},{},{} 
				],
				curIndex:0,
				typeArr:[
					{
						text:'商品'
					},
					{
						text:'店铺'
					}
				],
				stroeList:[
					{},{},{},{},{},{}
				],
				storeListPro:[{},{},{},]
				
			}
		},
		components:{
			productType
		},
		onLoad() {
			that = this
			
			
			
		},
		methods:{
			clickClear:function(){
				uni.showModal({
				    title: '提示',
				    content: '确定清空历史搜索吗？',
					confirmColor:'#06C1AE',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			changeTab:function(option){
				that.curIndex = option
				if(that.curIndex ==1){
					let view = uni.createSelectorQuery().in(this).select(".storeListBox");
					view.fields({
					  size: true,
					  scrollOffset: true
					}, data => {
					  console.log("得到节点信息" + JSON.stringify(data));
					  console.log("节点的宽为" + data.width);
					}).exec();
					
					view.boundingClientRect(data => {
					  console.log("得到布局位置信息" + JSON.stringify(data));
					  console.log("节点离页面顶部的距离为" + data.top);
					}).exec();
				}
			
				
			}
		}
	}
</script>

<style scoped>
	@import url("css/common.css");
	page{
		background:rgba(242,242,242,1);
	} 
	.searchTop{
		justify-content:space-between;
		padding: 40rpx 20rpx 20rpx 20rpx; 
		position: relative;
		background-color: #fff;
	}
	.searchTop input{
		height:64rpx;
		width: 596rpx; 
		padding: 0 20rpx;
		background:rgba(242,242,242,1);
		border-radius:32px;
	} 
    .goLeft{
		height:50rpx;
		width: 50rpx; 
	}
	.searchTop .icon_clear{
		position: absolute;
		right: 40rpx;
		top:58rpx;
		width: 30rpx;
		height: 30rpx;
	}
	
	.search_type{
		border-bottom:1px solid rgba(242,242,242,1);
		padding: 20rpx 0;
		background-color: #fff;
	}
	.search_type .search_typeTab{
		width: 50%;
		text-align: center;
		font-size:28rpx; 
		font-weight:bold; 
	}
	.search_type .search_typeTab text{
		padding-bottom: 10rpx;
	}
	.search_type .search_typeTab .cur{
		color:rgba(6,193,174,1);
		border-bottom: 2px solid rgba(6,193,174,1);
	}
	.storeListBlock{
		background:rgba(255,255,255,1);
		border-radius:20px;
	}
	.storeListBox{
		height: 1400rpx;
	}
	.storeListBox .storeListBlock{
		padding: 20rpx;
		border-radius:20rpx;
		margin: 20rpx;
	}
	.storeListBox .storeListBlock .storeListBlockTop {
		justify-content:space-between; 
	}
	.storeListBox .storeListBlock .storeListBlockTop .fl_text .stroeLogo{
		width:70rpx;
		height:70rpx;
		background:rgba(6,193,174,1);
		border-radius:50%;
		margin-right: 20rpx;
	} 
	.stroeScore{
		font-size:22rpx;  
		color:rgba(153,153,153,1);
	}
	.stroeName{
		font-size:26rpx;  
		color:rgba(51,51,51,1);
	}
	.fr_store{
		font-size:22rpx;  
		color:rgba(6,193,174,1);
		padding: 10rpx 20rpx;
		border:1px solid rgba(6,193,174,1);
		border-radius:22rpx;
	} 
	.storeListBox .storeListBlock .storeListBlockBottom{
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.storeListBox .storeListBlock .storeListBlockBottom .storeListBlockPro{ 
		position: relative;
		width:215rpx;
		height:215rpx;
	}
	.storeListBox .storeListBlock .storeListBlockBottom .storeListBlockPro image{
		width:215rpx;
		height:215rpx;
		border-radius:10rpx;
		display: block;
	}
	.storeListBox .storeListBlock .storeListBlockBottom .storeListBlockPro .price{
		position: absolute;
		left: 0;
		bottom:0;
		background-color: rgba(0,0,0,0.45);
		color: #fff;
		border-radius: 0 10rpx;
		font-size: 20rpx;
		padding: 0 10rpx;
	}
	 
	
</style>
